<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>jsbb</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="static/element/index.css"/>
    <link rel="icon" href="static/favicon.ico"/>
</head>
<body>
<div id="app">
    <template>
        <el-container class="index-container">
            <el-header class="index-header">
                <span class="index-title">jsbb</span>
                <div class="index-userInfo">
                    <span style="margin-right: 10px;">{{sysUser.userName}}</span>
                    <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 10px; cursor: pointer">
                        <el-avatar icon="el-icon-user-solid" size="medium" :src="avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>

            <el-container>
                <el-aside width="200px" class="index-aside">
                    <el-menu unique-opened background-color="#545c64" text-color="#fff" active-text-color="#409EFF">
                        <template v-for="(item,index) in sysMenu">
                            <el-submenu :key="index" :index="index+''">
                                <template slot="title">{{item.menuName}}</template>
                                <el-menu-item v-for="child in item.children"
                                              :index="child.url"
                                              @click="addTab(child.menuName, child.url)">{{child.menuName}}
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>

                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                        <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name">
                            <iframe :src="item.content" style="height: 570px;width: 100%;border: none"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>

        <el-dialog title="个人中心" width="70%" :visible.sync="userCenterDialog" :modal="false"
                   :close-on-click-modal="false">
            <el-tabs v-model="userCenterModel" @tab-click="handleClick">
                <el-tab-pane label="基本资料" name="first">
                    <el-form :model="baseForm" ref="baseForm" :rules="baseFormRules" label-width="100px">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="baseForm.sex">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birthDate">
                            <el-date-picker v-model="baseForm.birthDate" type="date" placeholder="选择日期"
                                            style="width:100%"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="baseForm.phone" maxlength="11"></el-input>
                        </el-form-item>
                        <el-form-item label="省市区" prop="province">
                            <el-cascader v-model="baseForm.province" :options="regionList"
                                         :props="{value:'id', label:'menuName', checkStrictly:true, expandTrigger:'hover', emitPath:false}"
                                         :show-all-levels="false" clearable></el-cascader>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="baseForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                                       :on-success="handleAvatarSuccess.bind(this,'head')" :before-upload="beforeAvatarUpload">
                                <el-avatar v-if="baseForm.avatar" :src="baseForm.avatar"></el-avatar>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="userCenterDialog = false">取 消</el-button>
                            <el-button type="primary" @click="baseFormSave">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRules" label-width="100px">
                        <el-form-item label="旧密码" prop="oldPwd">
                            <el-input v-model="pwdForm.oldPwd"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPwd">
                            <el-input v-model="pwdForm.newPwd"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPwd">
                            <el-input v-model="pwdForm.confirmPwd"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="userCenterDialog = false">取 消</el-button>
                            <el-button type="primary" @click="pwdFormSave">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </template>
</div>
</body>
<script src="static/js/axios.min.js"></script>
<script src="static/js/api.js"></script>
<script src="static/js/vue.min.js"></script>
<script src="static/element/index.js"></script>
<script src="static/js/home.js"></script>
<style>
.index-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.index-header {
    background-color: #403f3e;
    color: #409EFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
    padding: 0px;
}
.index-aside {
    background-color: #545c64;
}
.index-title {
    color: #fff;
    font-size: 22px;
    display: inline;
    margin-left: 8px;
}
.index-userInfo {
    font-size: 14px;
    display: flex;
    align-items: center
}
.el-submenu .el-menu-item {
    width: 199px;
    min-width: 175px;
}
</style>
</html>
